import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Select, Button, Card, message } from 'antd';

const FormItem = Form.Item;


@connect(state => ({
  sysUser: state.sysUser,
}))
@connect()
@Form.create()
export default class AddManager extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysUser/roleList',
    });
  }
  /*
    处理表单数据
   */
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        /*
          成功后调用表单清除
         */
        const { dispatch } = this.props;
        const roleArray = [];
        roleArray.push(values.roleId)
        dispatch({
          type: 'sysUser/add',
          payload: {
            accountStatus: 'USER_ACCOUNT_STATUS_NORMAL',
            address: values.address,
            birthday: 0,
            email: values.email,
            mobilePhone: values.mobilePhone,
            name: values.name,
            password: values.password,
            roleId: roleArray,
            sex: values.sex,
            username: values.username,
          },
          callback: () => {
            this.props.form.resetFields();
            this.props.closeModal(true);
          },
        });
      }
    });
  }
  render() {
    const { roleList } = this.props.sysUser;
    console.log(roleList)
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="登录账号"
          >
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true, message: '请输入登录账号',
                }],
            })(
              <Input placeholder="请输入登录账号" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="密码"
          >
            {getFieldDecorator('password', {
              rules: [{
                required: true, message: '请输入登录密码',
              }],
            })(
              <Input type="password" placeholder="请输入登录密码" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="角色"
            hasFeedback
          >
            {getFieldDecorator('roleId', {
              rules: [
                { required: true, message: '请选择角色' },
              ],
            })(
              <Select placeholder="请选择角色">
                {
                  roleList && roleList.map((item, index) => {
                    return (
                      <Select.Option
                        key={index.toString()}
                        value={item.id}
                      >{item.name}
                      </Select.Option>
                    );
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="姓名"
          >
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true, message: '请输入姓名',
                }],
            })(
              <Input placeholder="请输入姓名" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="联系电话"
          >
            {getFieldDecorator('mobilePhone', {
              rules: [
                {
                  required: true, message: '请输入联系电话',
                }],
            })(
              <Input placeholder="请输入联系电话" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="邮箱"
          >
            {getFieldDecorator('email', {
              rules: [
                ],
            })(
              <Input placeholder="请输入邮箱" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="地址"
          >
            {getFieldDecorator('address', {
              rules: [
                ],
            })(
              <Input placeholder="请输入地址" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="部门"
          >
            {getFieldDecorator('department', {
              rules: [
                ],
            })(
              <Input placeholder="请输入部门" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="职务"
          >
            {getFieldDecorator('position', {
              rules: [
              ],
            })(
              <Input placeholder="请输入职务" />
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}
